<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  <h1>我是一个购物车页面</h1>

  <div class="container">    
  </div>


  <script src="../tools/jquery.min.js"></script>
  <script>
    setPage();


    $('.container').click(function(e){
      const cart = JSON.parse(localStorage.cart);

      if(e.target.getAttribute('name') === 'all'){
        cart.forEach(function(item){
          item.buy = e.target.checked;
        })
      }else if(e.target.getAttribute('name') === 'other'){
        cart[e.target.getAttribute('index') - 0].buy = e.target.checked;
      }else if(e.target.getAttribute('name') === 'del'){
        cart.splice(e.target.getAttribute('index') - 0,1);
      }else if(e.target.getAttribute('name') === '减'){
        cart[e.target.getAttribute('index') - 0].num --;
      }else if(e.target.getAttribute('name') === '加'){
        cart[e.target.getAttribute('index') - 0].num ++;
      }

      localStorage.cart = JSON.stringify(cart);
      setPage();
    })


    function setPage(){
      let type = 0;
      let number = 0;
      let money = 0;


      let cart = localStorage.cart;

      if(cart === undefined){
        $('.container').html('<h1>您还没有创建购物车，请您想去创建购物车</h1>');
      }else{
        let bool = true;
        cart = JSON.parse(cart);
        if(cart.length === 0){
          $('.container').html('<h1>您的购物车已经被清空，请您先去挑选商品</h1>');
        }else{
          

          let str = `
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="" name="all">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
          `;

          cart.forEach(function(item,key){
            if(item.buy === false){
              bool = false;
            }else{
              type ++;
              number += item.num;
              money += item.goods_price * item.num;
            }

            str += `
              <li class="cart-item">
                <div class="left">
                  <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>1${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="减" index=${key} type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="加" index=${key} type="button" class="btn btn-default" ${item.num === item.goods_number ? 'disabled' : ''}>+</button>
                      </div>
                      <button class="del btn btn-danger" name="del" index="${key}">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
          })

          str +=`
              </ul>
            </div>
              <div>
                <h1>您一共购买了${type}种商品</h1>
                <h1>您一共购买了${number}件商品</h1>
                <h1>您一共需要支付${money.toFixed(2)}元</h1>

              </div>
          </div>
          `;

          $('.container').html(str);
          $('[name="all"]').prop('checked',bool);
        }
        
      }
    }
  </script>
</body>
</html>
